<template>
    <div class="common-layout">

        <el-row>
            <el-col :span="24">
            <el-table :data="state.data" height="800" 
            :cell-class-name="tableCellClassName"
            @sort-change="sortChange"
            :default-sort="state.sort"
            @cell-click="cellClick"
            style="width: 100%">
                <el-table-column prop="date" label="日期" sortable width="210"/>
                <el-table-column prop="stock" label="股票" width="150" />
                <el-table-column prop="close" label="价格"/>
                <el-table-column prop="count" label="count" sortable/>
                <el-table-column prop="deSum" label="de_sum">
                    <template #default="scope">
                        {{ scope.row.deSum.toFixed(2) }}
                    </template>
                </el-table-column>
                <el-table-column prop="pct" label="pct"  sortable/>
                <el-table-column prop="nextPct" label="next_pct"  sortable/>
                <el-table-column prop="lp" label="分位点" sortable/>
                <el-table-column prop="gt30d" label="gt30d" sortable/>
                <el-table-column prop="gt60d" label="gt60d" sortable/>
                <el-table-column prop="category" label="类别" sortable/>
            </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { getLpClassName } from '../utils/help';
import { getDailyDeSum } from '../service/dailyDeSum';

        const base = "DailyDeSum"
        const selectKey = base + "Select"
        const sortPropKey = base + "SortProp"
        const sortOrderKey = base + "SortOrder"

        const state = reactive({
            options: [],
            rawData: [],
            data: [],
            operationSelectedStock: "",
            operationSelected: "",
            sort: { 
                prop: sessionStorage.getItem(sortPropKey) || 'lp' , 
                order: sessionStorage.getItem(sortOrderKey) || 'ascending' 
            }

        })

        const loadData = () => {
            getDailyDeSum(state.operationSelectedStock).then( res => {
                state.rawData = res.data
                state.data = res.data
            })
        }
        
        loadData()

        const change = () => {
            loadData()
        }

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        //单击
        function cellClick(row, column, cell, event) {
            let columnProperty = column.property
            let val = row[columnProperty]

            if (columnProperty == 'stock') {
                // 点相同的股票名则取消选择
                if (state.operationSelectedStock != "" && state.operationSelectedStock == val) {
                    state.operationSelectedStock = ""
                } else {
                    state.operationSelectedStock = val
                }
                // 重新请求数据
                loadData()
            }

            if (['date','deSum'].includes(columnProperty)) {
                if (state.operationSelected != "" && state.operationSelected == val) {
                    state.operationSelected = ""
                    state.data = state.rawData
                } else {
                    state.operationSelected = val
                    if (columnProperty == 'deSum') {
                        if (val <= -10) {
                            state.data = state.rawData.filter(item => item[columnProperty] <= -10)
                        } else {
                            state.data = state.rawData.filter(item => item[columnProperty] > -10)
                        }
                    } else {
                        state.data = state.rawData.filter(item => item[columnProperty] == val)
                    }
                }
            }
        }

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {

            let property = column.property
            let val = row[property]

            if (property == "lp") {
                return getLpClassName(val)
            }

            if (['pct','nextPct','gt30d','gt60d'].includes(property)) {
                if (val < 0) {
                    return 'lt0-cell'
                }
            }
            if (property == "deSum" && val <= -10) {
                return 'lt0-cell'
            }

            return ''
        }
</script>

<style>
</style>